<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p id="msg"></p>
        <p>
            <button id="settime">Set Time</button>
            <button id="cleartime">Clear Time</button>
            <button id="setinterval">Set Interval</button>
            <button id="clearinterval">Clear Interval</button>
        </p>

        <script>
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = handleButtonPress;
            }

            var timeID;
            var intervalID;
            var count = 0;

            function handleButtonPress(e) {
                if (e.target.id == "settime") {
                    timeID = window.setTimeout(function() {
                        displayMsg("Timeout Expired");
                    }, 5000);
                    displayMsg("Timeout Set");
                } else if (e.target.id == "cleartime") {
                    window.clearTimeout(timeID);
                    displayMsg("Timeout Cleared");
                } else if (e.target.id == "setinterval") {
                    intervalID = window.setInterval(function() {
                         displayMsg("Interval expired. Counter: " + count++);
                    }, 2000);
                    displayMsg("Interval Set");
                } else if (e.target.id == "clearinterval") {
                    window.clearInterval(intervalID);
                    displayMsg("Interval Cleared");
                }
            }
            
            function displayMsg(msg) {
                document.getElementById("msg").innerHTML = msg;
            }

        </script>
    </body>
</html>
